<template>
    <div class="tab-box">
        <div
            class="tab-name"
            :class="`${tabValue === '1' ? 'active':''}`"
            @click="handleClick('1')">
            今日
        </div>
        <div
            class="tab-name"
            :class="`${tabValue === '2' ? 'active':''}`"
            @click="handleClick('2')">
            总计
        </div>
    </div>
</template>
<script setup>
defineProps({
    tabValue: {
        type: String,
        default: ''
    }
})
const emits = defineEmits(['change'])

const handleClick = (val) =>  emits('change', val)
</script>
<style lang="scss" scoped>

.tab-box {
    position: absolute;
    right: 28px;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .tab-name {
        width: 66px;
        height: 26px;
        background: url(@/assets/images/tab_bg.png) no-repeat center/cover;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 4px;
        font-size: 14px;
        color: rgba($color: #fff, $alpha: .8);

        &.active {
            background-image: url(@/assets/images/tab_bg_active.png);
            color: rgba($color: #fff, $alpha: 1);
        }
    }
}
</style>
